<template>
  <div style="margin-top: 30px">
    <div>
      <info :form-data="form"></info>
      <div>
        <el-card
          class="box-card"
          shadow="always"
          style="background: #fafafa; margin-top: 20px"
        >
          <template #header>
            <div class="card-header" style="padding-bottom: 4px">
              <span>服务计划</span>
            </div>
          </template>
          <div>
            <el-table
              v-loading="loading"
              :data="form.servicePlanList"
              stripe
              border
              max-height="250"
            >
              <el-table-column
                label="序号"
                type="index"
                width="80"
                align="center"
              />
              <el-table-column
                label="服务项目"
                align="center"
                prop="serviceItemName"
              />
              <el-table-column
                label="单价（元）"
                align="center"
                prop="unitPrice"
              />
              <el-table-column label="单位" align="center">
                <template #default="scope">
                  <span>
                    {{
                      bed_uint.find((item) => item.value == scope.row.unit)
                        ? bed_uint.find((item) => item.value == scope.row.unit)
                            .label
                        : ""
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="社区站点佣金（元）"
                align="center"
                prop="commission"
              />
              <el-table-column label="服务频率" align="center">
                <template #default="scope">
                    <span>
                      {{
                        service_frequency.find(
                            (item) => item.value == scope.row.serviceFrequency,
                        )
                            ? service_frequency.find(
                                (item) =>
                                    item.value == scope.row.serviceFrequency,
                            ).label
                            : ""
                      }}
                    </span>
                </template>
              </el-table-column>
              <el-table-column
                label="服务次数"
                align="center"
                prop="serviceTimes"
              />
              <el-table-column label="备注" align="center" prop="notes" />
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button link type="primary" @click="edit(scope.row)"
                    >查看服务时间</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      v-model="open"
      title="设置服务时间"
      append-to-body
      width="600px"
      v-if="open"
      @close="cancel"
      :close-on-click-modal="false"
    >
      <div>
        <el-table v-loading="loading" :data="postList" stripe border>
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column label="日期" align="center">
            <template #default="scope">
              <span v-if="serviceFrequency == '1'">
                {{
                  plan_week.find((item) => item.value == scope.row.date)
                    ? plan_week.find((item) => item.value == scope.row.date)
                        .label
                    : ""
                }}
              </span>
              <span v-else-if="serviceFrequency == '2'">
                {{
                  plan_day.find((item) => item.value == scope.row.date)
                    ? plan_day.find((item) => item.value == scope.row.date)
                        .label
                    : ""
                }}
              </span>
              <span v-else>
                {{ scope.row.date }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="服务开始时间"
            align="center"
            prop="beginTime"
          />
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="step2">
import info from "./../../homebedsign/evaluation/basicinfo.vue";
const loading = ref(false);
const { proxy } = getCurrentInstance();
const { sys_user_sex, bed_uint, service_frequency, plan_week, plan_day } =
  proxy.useDict(
    "sys_user_sex",
    "bed_uint",
    "service_frequency",
    "plan_week",
    "plan_day",
  );
const { applyId } = defineProps(["applyId"]);
import { servicePlanSave } from "@/api/homebedsign";
import { ref } from 'vue'
const postList = ref([]);
const open = ref(false);
const serviceFrequency = ref("");
const data = reactive({
  form: {},
});

const { form } = toRefs(data);
function cancel() {
  open.value = false;
}
function edit(data) {
  open.value = true;
  serviceFrequency.value = data.serviceFrequency;
  postList.value = data.serviceTimeList;
}
function getInfo() {
  servicePlanSave(applyId).then((res) => {
    form.value = res.servicePlanInfo;
  });
}
getInfo();
</script>

<style scoped lang="scss"></style>
